<template>
  <div>
    <!-- <pre>{{content}}</pre> -->
    <div v-if="content">
      <welcView @switch="viewInShow='head'" v-if="viewInShow=='welc'" />
      <headView @switch="viewInShow='main'" v-else-if="viewInShow=='head'" />
      <mainView @switch="viewInShow='text'" v-else-if="viewInShow=='main'" />
      <textView @switch="viewInShow='none'" v-else-if="viewInShow=='text'" />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import welcView from "./components/welcView";
import headView from "./components/headView";
import mainView from "./components/mainView";
import textView from "./components/textView";
export default {
  name: "actionView",
  components: { welcView, headView, mainView, textView },
  data() {
    return {
      viewInShow: "welc",
    };
  },
  computed: {
    ...mapState(["content", "current"]),
    filename() {
      if (!this.$route.query.name) return null;
      return this.$route.query.name + ".json";
    },
  },
  methods: {
    ...mapActions(["loadContent"]),
    ...mapMutations(["setAnswer"]),
    initialize() {
      this.loadContent({ filename: this.filename });
    },
    handleSwitch(from) {},
  },
  mounted() {
    if (!this.filename) {
      console.log("Missing Action NAME");
      this.$router.push({ name: "initialView" });
    } else {
      console.log(this.filename);
      this.initialize();
    }
    document.title = this.content.title;
  },
};
</script>